<template>
	<div class="container">
		<el-row>
			<el-col :span="24" class="institutionTitle">
				<p>机构列表</p>
			</el-col>
		</el-row>
		<section class="institutionContent">
			<el-row class="institutionContent-filter">
				<!--查询医疗机构-->
				<el-col :span="23" class="searchInstitution">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item>
							<el-select v-model="formInline.region" placeholder="---机构性质---">
								<el-option label="企业单位" value="企业单位"></el-option>
								<el-option label="教育机构" value="教育机构"></el-option>
								<el-option label="公立医院" value="公立医院"></el-option>
								<el-option label="私立医院" value="私立医院"></el-option>
								<el-option label="政府部门" value="政府部门"></el-option>
								<el-option label="科研院所" value="科研院所"></el-option>
								<el-option label="其他" value="其他"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-input v-model="formInline.institutionName" placeholder="机构名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="search" @click="getinstitutionList">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<!--新增机构-->
				<el-col :span="1" @click.native="handleAdd">
					<el-button type="primary" class="addInstitution">
						<i class="fa fa-plus" aria-hidden="true"></i>
						<span>新增机构</span>
					</el-button>
				</el-col>
			</el-row>
			<!--医疗机构表格-->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column label="机构名称" width="180" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<span>{{ scope.row.institutionName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="机构性质" width="120">
					<template slot-scope="scope">
						<span>{{ scope.row.institutionType }}</span>
					</template>
				</el-table-column>
				<el-table-column label="联系人" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.contacts }}</span>
					</template>
				</el-table-column>
				<el-table-column label="电话" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.telephone }}</span>
					</template>
				</el-table-column>
				<el-table-column label="地址" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<span>{{ scope.row.address }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="200" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<span> {{scope.row.createTime}} </span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<span size="small" @click="handleEdit(scope.$index, scope.row)" class="editInstitution"><i class="el-icon-edit"></i>更新</span>
					</template>
				</el-table-column>
			</el-table>
			<!--新增机构页面-->
			<el-dialog title="新增机构" v-model="addFormVisible" :close-on-click-modal="false">
				<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
					<el-form-item label="机构名称" prop="institutionName">
						<el-input v-model="addForm.institutionName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="机构性质" prop="institutionType">
						<el-select v-model="formInline.institutionType" placeholder="---机构性质---">
							<el-option label="企业单位" value="1"></el-option>
							<el-option label="教育机构" value="2"></el-option>
							<el-option label="公立医院" value="3"></el-option>
							<el-option label="私立医院" value="4"></el-option>
							<el-option label="政府部门" value="5"></el-option>
							<el-option label="科研院所" value="6"></el-option>
							<el-option label="其他" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="addForm.contacts" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="telephone">
						<el-input v-model="addForm.telephone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input type="textarea" v-model="addForm.address"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
			<!--编辑页面-->
			<el-dialog title="编辑机构信息" v-model="editFormVisible" :close-on-click-modal="false">
				<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
					<el-form-item label="机构名称" prop="institutionName">
						<el-input v-model="editForm.institutionName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="机构性质" prop="institutionType">
						<el-select v-model="formInline.institutionType" placeholder="---机构性质---">
							<el-option label="企业单位" value="1"></el-option>
							<el-option label="教育机构" value="2"></el-option>
							<el-option label="公立医院" value="3"></el-option>
							<el-option label="私立医院" value="4"></el-option>
							<el-option label="政府部门" value="5"></el-option>
							<el-option label="科研院所" value="6"></el-option>
							<el-option label="其他" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="editForm.contacts" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="telephone">
						<el-input v-model="editForm.telephone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input type="textarea" v-model="editForm.address"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
			<div class="block" style="text-align: right;margin-top: 20px;">
				<el-pagination layout="prev, pager, next" :total="100">
				</el-pagination>
			</div>
		</section>
	</div>
</template>

<script>
import util from "../../common/util";
export default {
  data() {
    return {
      // filter
      formInline: {
        institutionName: "",
        institutionType: ""
      },
      tableData: [
        {
          institutionName: "九峰医疗",
          institutionType: "企业单位",
          contacts: "王小虎",
          telephone: "13612346523",
          address: "上海市浦东新区周浦镇康新公路3399号25号楼1楼",
          createTime: util.formatDate.format(
            new Date(),
            "yyyy年MM月dd日 hh:mm:ss"
          )
        },
        {
          institutionName: "上海市浦东新区周浦医院",
          institutionType: "公立医院",
          contacts: "张晓虎",
          telephone: "13612346523",
          address: "上海市浦东新区周浦镇康新公路3399号25号楼1楼",
          createTime: util.formatDate.format(
            new Date(),
            "yyyy年MM月dd日 hh:mm:ss"
          )
        },
        {
          institutionName: "九峰医疗",
          institutionType: "企业单位",
          contacts: "王小虎",
          telephone: "13612346523",
          address: "上海市浦东新区周浦镇康新公路3399号25号楼1楼",
          createTime: util.formatDate.format(
            new Date(),
            "yyyy年MM月dd日 hh:mm:ss"
          )
        },
        {
          institutionName: "九峰医疗",
          institutionType: "企业单位",
          contacts: "王小虎",
          telephone: "13612346523",
          address: "上海市浦东新区周浦镇康新公路3399号25号楼1楼",
          createTime: util.formatDate.format(
            new Date(),
            "yyyy年MM月dd日 hh:mm:ss"
          )
        }
      ],
      addFormVisible: false,
      addLoading: false,
      addFormRules: {
        institutionName: [
          {
            required: true,
            message: "请输入机构名称",
            trigger: "blur"
          }
        ],
        telephone: [
          {
            required: true,
            pattern: /^1[345678]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ]
      },
      addForm: {
        institutionName: "",
        institutionType: ""
      },
      editFormVisible: false,
      editLoading: false,
      editFormRules: {
        institutionName: [
          {
            required: true,
            message: "请输入机构名称",
            trigger: "blur"
          }
        ],
        telephone: [
          {
            required: true,
            pattern: /^1[345678]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ]
      },
      editForm: {
        id: 0,
        institutionName: ""
      }
    };
  },
  methods: {
    // formatter
    //			formatDate:function(time){
    //				return  util.formatDate.format(row.createTime, 'yyyy年MM月dd日 hh:mm:ss');
    //			},
    getinstitutionList() {
      let param = {
        institutionName: this.formInline.institutionName,
        institutionType: this.formInline.institutionType
      };
      // need queryInstitution api
      console.log("submit!");
    },
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        institutionName: ""
      };
    },
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            type: "warning"
          }).then(() => {
            this.editLoading = true;
            this.param = Object.assign({}, this.editForm);
            // need editInstitution api
            console.log(this.param);
            this.$message({
              type: "success",
              message: "更新成功!"
            });
            this.editFormVisible = false;
            this.editLoading = false;
          });
        }
      });
    },
    addSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            type: "warning"
          }).then(() => {
            this.editLoading = true;
            this.param = Object.assign({}, this.addForm);
            // need addInstitution api
            console.log(this.param);
            this.addFormVisible = false;
            this.editLoading = false;
          });
        }
      });
    },
    mounted() {
      this.getinstitutionList();
    }
  }
};
</script>

<style lang="scss" scoped>
$bgTiltle: #3c8dbc;
.container {
  .institutionTitle {
    text-align: left;
    font-size: 22px;
    color: #444;
    height: 60px;
    border-bottom: 4px solid #cdd1da;
    line-height: 60px;
    padding-left: 20px;
  }
  .institutionContent {
    background-color: #fff;
    padding: 10px;
    .institutionContent-filter {
      margin: 16px 10px;
    }
    .searchInstitution {
      float: right;
      text-align: right;
    }
    .editInstitution {
      color: $bgTiltle;
      cursor: pointer;
    }
    .editInstitution:hover {
      text-decoration: underline;
    }
    .el-icon-edit {
      color: $bgTiltle;
      font-size: 13px;
      padding-right: 2px;
    }
    .el-form-item__label {
      font-size: 20px;
      font-weight: bolder;
    }
  }
}
</style>